<template>
  <div>
    <a-spin :spinning="spinning">
      <a-collapse v-model:activeKey="activeKey" ghost>
        <template #expandIcon="{ isActive }">
          <caret-right-outlined :rotate="isActive ? 90 : 0" />
        </template>
        <a-collapse-panel v-for="item in autoRemindList" :key="item.id">
          <template #header>
            <a-row style="width: 100%" justify="space-between">
              <a-col>{{ item.name }}</a-col>
              <a-col style="color: #4e50e8" @click.stop="remindAdd(item)">
                新增通知条件
              </a-col>
            </a-row>
          </template>
          <a-row
            style="width: 100%; font-size: 13px; margin-bottom: 10px"
            :gutter="[16, 16]"
            align="middle"
            :wrap="false"
            v-for="notice in item.noticeList"
            :key="notice.id"
          >
            <a-col :span="6"
              >通知时间：逾期{{ notice?.remind_json?.condition_1_txt
              }}{{ notice?.remind_json?.day }}天，{{
                notice?.remind_json?.condition_2_txt
              }}{{ notice?.remind_json?.time }}发送提醒
            </a-col>
            <a-col :span="4" style="text-align: center"
              >通知模板：{{ notice.template_name }}
            </a-col>
            <a-col :span="4" style="text-align: center">
              <span>通知内部人员：</span>
              <span v-if="notice?.org_user?.length">
                {{ notice.org_user.map((v) => v.realname).join(",") }}
              </span>
              <span v-if="notice.type == 1"> 合同经办人 </span>
              <span v-if="notice.type == 3"> 不通知 </span>
            </a-col>
            <a-col :span="2" style="text-align: center">
              <span>
                通知租客：
                {{ notice.is_send_owner == 1 ? "是" : "否" }}
              </span>
            </a-col>
            <a-col :span="4" style="text-align: center">
              <a-space>
                <span>状态：</span>
                <span>
                  <a-switch
                    v-model:checked="notice.status"
                    checked-children="开"
                    un-checked-children="关"
                    :checkedValue="1"
                    :unCheckedValue="0"
                    @change="statusChange(notice)"
                  />
                </span>
              </a-space>
            </a-col>
            <a-col :span="4" style="text-align: right">
              <a-space>
                <a-button
                  type="link"
                  danger
                  style="color: #4e50e8"
                  @click="editClick(notice, item.name)"
                  >编辑</a-button
                >
                <a-button type="link" danger @click="deleteClick(notice)"
                  >删除</a-button
                >
              </a-space>
            </a-col>
          </a-row>
        </a-collapse-panel>
      </a-collapse>
    </a-spin>

    <!-- 添加自动催缴 -->
    <AddPayment
      :visible="visiblePayment"
      :detail="detailData"
      @submitChange="submitChange"
      @closeChange="visiblePayment = false"
    />
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  nextTick,
  reactive,
  ref,
  createVNode,
  watch,
  toRefs,
  onMounted,
} from "vue";
import {
  ExclamationCircleOutlined,
  CaretRightOutlined,
} from "@ant-design/icons-vue";
import { Modal, message } from "ant-design-vue";
import AddPayment from "./modules/AddPayment.vue";
import request from "../../../common/utils/request";

export default defineComponent({
  name: "Payment",
  components: { CaretRightOutlined, AddPayment },
  setup() {
    const state = reactive({
      count: 0,
      activeKey: 0,
      checked1: false,
      visiblePayment: false,
      spinning: false,
      detailData: {},
      autoRemindList: [],
    });

    const remindAdd = (data) => {
      state.detailData = data;
      state.detailData.edit = false;
      state.visiblePayment = true;
    };

    const editClick = (data, name) => {
      state.detailData = data;
      state.detailData.name = name;
      state.detailData.edit = true;
      state.visiblePayment = true;
    };

    const deleteClick = ({ id }) => {
      Modal.confirm({
        title: "确定要删除吗?",
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
          request.del("/org", "/notice/remindDel", { id }).then((res) => {
            message.success("删除成功");
            getAutoRemindList();
          });
        },
      });
    };

    const submitChange = () => {
      state.visiblePayment = false;
      getAutoRemindList();
    };

    const getAutoRemindList = () => {
      state.spinning = true;
      request
        .get("/org", "/notice/autoRemindList")
        .then((res) => {
          state.autoRemindList = res.list;
          if (!state.activeKey) {
            state.activeKey = res.list[0].id;
          }
          state.spinning = false;
        })
        .catch(() => {
          state.spinning = false;
        });
    };

    const statusChange = (data) => {
      request.put("/org", "/notice/remindEdit", data).then((res) => {
        message.success("修改成功");
        getAutoRemindList();
      });
    };

    onMounted(() => {
      getAutoRemindList();
    });

    return {
      ...toRefs(state),
      remindAdd,
      deleteClick,
      submitChange,
      editClick,
      statusChange,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-collapse-item) {
  border-bottom: 1px solid #d7d7d7;
}
</style>
